<template>
	<view class="center">
		<view class="bg center">
			<text class="compnay">中移互联网有限公司</text>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor">
				<swiper-item>
					<view class="banner">
						<image src="../../static/work.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="banner">
						<image src="../../static/work.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="banner">
						<image src="../../static/work.png"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="center-nav margin-top">
			<view class="center-nav-content">
				<view class="center-nav-item" v-for="(nav,index) in navs">
					<image :src="'../../static/'+nav.icon+'.png'"></image>
					<text class="center-nav-item-text">{{nav.text}}</text>
				</view>
			</view>
		</view>
		
		<view class="center-list">
			<view class="center-nav-title">
				<text>团队通信</text>
			</view>
			<view class="center-list-content">
				<view class="center-content-item" v-for="(nav,index) in tongxin">
					<text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }}  </text>
					<view class="center-content-item-info">
						<text class="center-content-item-text">{{nav.text}}</text>
						<text class="center-content-item-desc">{{nav.desc}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="center-list">
			<view class="center-nav-title">
				<text>移动办公</text>
			</view>
			<view class="center-list-content">
				<view class="center-content-item" v-for="(nav,index) in bangong">
					<text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }}  </text>
					<view class="center-content-item-info">
						<text class="center-content-item-text">{{nav.text}}</text>
						<text class="center-content-item-desc">{{nav.desc}}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				indicatorColor:'#ddd',
				indicatorActiveColor:'#fff',
				navs:[
					{
						icon:"icon1",
						text:'应用商城'
					},
					{
						icon:"icon2",
						text:'应用管理'
					},
					{
						icon:"icon3",
						text:'咨询客服'
					},
					{
						icon:"icon4",
						text:'创建团队'
					}
				],	
				tongxin:[
					{
						icon:"\u{e609}",
						text:'企业通讯录',
						desc:'所有部门通讯名单',
						class:'color-1'
					},
					{
						icon:"\u{e62f}",
						text:'超级会议',
						desc:'多人视频通话会议',
						class:'color-3'
					},
					{
						icon:"\u{e607}",
						text:'群发信使',
						desc:'一千条群发短信',
						class:'color-2'
					},
					{
						icon:'\u{e64d}',  //原代码：&#xe60a;
						text:'139邮箱',
						desc:'汇集所有邮件信息',
						class:'color-4'
					}
				],
				bangong:[
					{
						icon:"\u{e60f}",
						text:'考勤打卡',
						desc:'精准定位考勤签到',
						class:'color-2'
					},
					{
						icon:"\u{e654}",
						text:'审批',
						desc:'一键批量处理',
						class:'color-3'
					},
					{
						icon:"\u{e635}",
						text:'日志',
						desc:'工作项目内容汇报',
						class:'color-4'
					},
					{
						icon:'\u{e615}',  //原代码：&#xe60a;
						text:'企业活动',
						desc:'企业最新活动发布',
						class:'color-1'
					}
				]
			}
		},
		methods: {
			goLogin() {
				if (!this.login) {
					console.log("点击前往登录")
				}
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4366421_k5i3ya8nfw.ttf?t=1702189086737') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.center {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color:#5b8cff;  //5b8cff 4194fc
	$white-color:#fff;
	$radius:5rpx;
	$border-color:#efefef;
	$color-1: #6eacfe;
	$color-2: #52f0cf;
	$color-3: #ffcd46;
	$color-4: #ff727d;
	$list-item-height:100rpx;
	$list-margin:15rpx;
	.bg{
		background-image: linear-gradient(#5b8cff, #4194fc);
		min-height: 550rpx;
		border-bottom-left-radius:30% ;
		border-bottom-right-radius:30% ;
		
		.compnay{
			width: calc(100vw - 80rpx);
			margin: 0 auto 30rpx;
			font-size:38rpx;
			color:#fff;
			font-weight: 400;
		}
		.banner {
			width: 100vw;
			height: 270rpx;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;
			
			image{
				width: calc(100vw - 80rpx);
				margin: 0 auto;
				height: 270rpx;
				border-radius: 20rpx;
			}
		}
	}
	.center-list {
		background-color: #FFFFFF;
		margin:0 auto 0;
		padding-bottom:$list-margin ;
		width: calc(100vw - 0rpx);
		flex-direction: column;
		border-radius: $radius;
	}
	.center-nav{
		background-color: #FFFFFF;
		margin:0rpx auto 50rpx;
		width: calc(100vw - 80rpx);
		flex-direction: column;
		border-radius: $radius;		
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
		border-radius: 20rpx;
	}
	.center-nav-title{
		padding:25rpx 40rpx 0rpx;
		font-size:34rpx;
		color:#333;
		font-weight: 400;
	}
	.center-nav-content{
		display: flex;
		align-items: center;
		padding:30rpx 20rpx;
		box-sizing: border-box;
		.center-nav-item{
			flex-direction: column;
			flex:1;
			text-align: center;
			image{
				width:104rpx;
				height:105rpx;
				margin: 0 auto;
			}
			.center-nav-item-icon{
				color:#333;
				font-size:48rpx;
				font-weight: 500;
				font-family: texticons;
			}
			.center-nav-item-text{
				color:#666;
				font-size:30rpx;
				font-weight: 400;
				margin-top: 5rpx;
			}
		}
	}
	.center-list-content{
		box-sizing: border-box;
		padding: 25rpx 40rpx;
		flex-wrap: wrap;
		.center-content-item{
			width:50%;
			box-sizing: border-box;
			padding: 25rpx 0rpx;
			align-items: center;
			.center-content-item-icon{
				color:#fff;
				font-size:48rpx;
				font-weight: 500;
				font-family: texticons;
				border-radius: 20rpx;
				padding: 20rpx;
			}
			.center-content-item-info{
				flex-direction: column;
				margin-left: 20rpx;
				.center-content-item-text{
					color:#666;
					font-size:32rpx;
					font-weight: 400;
				}
				.center-content-item-desc{
					color:#888;
					font-size:24rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
		}
	}
	.margin-top{
		margin-top: -160rpx;
	}
	.color-1{
		background-image: linear-gradient(#72aefe, #4896ff);
	}
	.color-2{
		background-image: linear-gradient(#5ff9d7, #39debd);
	}
	.color-3{
		background-image: linear-gradient(#ffd155, #ffbc04);
	}
	.color-4{
		background-image: linear-gradient(#ff808b, #ff6872);
	}
</style>